<template>
  <div class="contentEa">
    <div class="text-center">
      <el-input class="inputEa" v-model="name" placeholder="请输入商品名称"></el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
    </div>
    <div class="flex" style="margin-top: 100px;">
      <el-card class="item" v-for="v in list">
        <div slot="header" class="clearfix">
          <span>{{v.name}}</span>
        </div>

        <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div class="text-center">
            <el-image
              style="width: 200px; height: 200px;"
              :src="v.url"
              :preview-src-list="[v.url]">
            </el-image>
          </div>
          <el-form-item label="商品名称：" prop="name">
            <div>xxxx</div>
          </el-form-item>
          <el-form-item label="商品描述：" prop="name">
            <div>xxxxxxxxxxxxxxxxxxxxxxx</div>
          </el-form-item>
          <el-form-item label="最低价格：" prop="name">
            <div>
              1000
              <el-tag style="margin-left: 20px;" type="warning">最低</el-tag>
            </div>
          </el-form-item>

          <el-form-item label="历史价格：" prop="name">
            <div>1200</div>
          </el-form-item>
          <el-form-item label="价格差距：" prop="name">
            <div>
              {{v.price - 1000}}
              <el-tag v-if="v.price > 1000" style="margin-left: 20px;" class="el-icon-sort-up" type="danger">上涨</el-tag>
              <el-tag v-if="v.price < 1000" style="margin-left: 20px;" class="el-icon-sort-down" type="success">下调</el-tag>
            </div>
          </el-form-item>
          <div class="text-center">
            <el-button type="primary">前去商城<i class="el-icon-right el-icon--right"></i></el-button>
          </div>
        </el-form>
<!--        <div class="flex">-->
<!--          <div>商品图片：</div>-->
<!--          <el-image-->
<!--            style="width: 100px; height: 100px"-->
<!--            :src="v.url"-->
<!--            :preview-src-list="[v.url]">-->
<!--          </el-image>-->
<!--        </div>-->
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      name: '',
      list: [
        {name: "震坤行", url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", price: 1200},
        {name: "西域", url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", price: 600},
        {name: "京东工业购", url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", price: 700},
      ]
    }
  }
}
</script>

<style lang="scss">
.flex {
  display: flex;
}

.contentEa {
  min-width: 1500px;
  padding: 20px;
  margin: 0 auto;
  padding: 100px;

  .inputEa {
    width: 600px;
  }

  .item {
    flex: 1;
    padding: 20px;
  }
  .title{
    font-weight: bold;
  }
}
</style>
